import { style, globalStyle } from '@vanilla-extract/css';
import { vars } from '@knno/jsx-ui/theme.css';

globalStyle(':root,body,#root', {
	display: 'flex',
	flexDirection: 'column',
	alignItems: 'stretch',
	height: '100%',
	margin: 0,
});

export const bar = style({
	display: 'flex',
	flexDirection: 'row',
	flexWrap: 'wrap',
	alignItems: 'center',
	marginBottom: '20px',
	gap: '10px',
});

globalStyle(`${bar} > *`, {
	margin: '0.4em',
});

export const topBar = style({
	display: 'flex',
	flexDirection: 'row',
	alignItems: 'center',
	padding: '1em',
	gap: '0.2em',
	backgroundColor: vars.color.panelBackground,
});
